import React, { Children, cloneElement } from 'react'
import { array, number } from 'prop-types'

import { GridWrapper } from './styledGrid'

export default function Grid({
  children,
  columnNum
}) {
  return (
    <GridWrapper>
      {
        Children.map(children, child => {
          return cloneElement(child, {
            columnNum
          })
        })
      }
    </GridWrapper>
  )
}

Grid.defaultProps = {
  columnNum: 4
}

Grid.propTypes = {
  children: array,
  columnNum: number
}